Quiero mostrar imágenes de un producto según las opciones de color. Por ejemplo, si mi producto son zapatos que vienen en blanco y negro, quiero que solo aparezcan las imágenes en negro cuando se seleccione la opción de color negro. Logré hacerlo dando a las imágenes una alternativa, agregándolas a una clase y luego mostrando y ocultando la imagen en función de si la alternativa coincide con la opción. Sin embargo, noté que para la vista móvil había más puntos y diapositivas de Slick que imágenes reales. Así que resolví esto agregando llamadas ingeniosas para filtrar y desfiltrar diapositivas mientras escondo y muestro imágenes dándome este código:

 _filterThumbnails: function(variant) { if (variant.featured_image != null && variant.featured_image.alt != null) { $('[data-thumbnail-color]').hide(); $('.product-single__media-group').slick('slickUnfilter'); var thumbnail_selector = '[data-thumbnail-color="' + variant.featured_image.alt + '"]'; $(thumbnail_selector).show(); $('.product-single__media-group').slick('slickFilter',thumbnail_selector); } else { $('[data-thumbnail-color]').show(); $('.product-single__media-group').slick('slickUnfilter'); } },

Mi problema es que la clase que llamo slick de .product-single__media-group es la misma en la vista de escritorio y móvil. Entonces, en el móvil, la función llama a slick a través de esa clase y funciona ya que slick existe para ella. Sin embargo, en el escritorio, las imágenes no se usan, por lo que las llamadas no estarán definidas y arruinarán el sitio.